<template>
  <el-container style="background-image: url(../../static/img/loginBg.png);height: 100%;">
    <el-header>
      <div>
        <img src="../../static/img/indexHeader.png" style="width: 1480.2px;height: 90px;" />
      </div>
<!--      <el-row>
        <el-col :span="8">
          <span style="margin-left: 10px,0px,0px,100px; font-size: large;color: #FFFFFF;">欢迎来到交通系统12123</span>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 5px;">
            <el-button type="success" round><i class="el-icon-apple"></i>修改密码</el-button>
            <el-button type="success" round><i class="el-icon-apple"></i>退出登录</el-button>
            <el-button type="success" round><i class="el-icon-apple"></i>系统管理</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 5px;">
            <img src="../../static/img/qq.gif" width="50" height="50" style="border-radius: 50%;" />
            <span>用户名:{{loginUserCardId}}</span>
          </div>
        </el-col>
      </el-row> -->
    </el-header>
    <el-container style="margin-top: 50px;background-image: url(../../static/img/loginBg.png);">
      <el-aside width="200px" style="margin-left: 100px;">
      <el-menu :default-openeds="['1','2','3','4','5','6','7','8','9','10','11','12','13']"
      router background-color="#0D419D"
      style="height: 600px;">
        <template v-for="x in node">
          <el-submenu :index="x.index">
             <template slot="title"><i class="el-icon-message"></i><span style="color: #fff;font-size: large;">{{x.name}}</span></template>
              <template v-for="y in x.children">
                <el-menu-item :index="y.url" style="color: #fff;font-size: large;"><i class="el-icon-message"></i>{{y.name}}</el-menu-item>
              </template>
              <el-menu-item style="color: #fff;font-size: large;" @click.native="logout"><i class="el-icon-message"></i>退出系统</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>

      </el-aside>
      <el-container>
        <el-main style="width: 90%;">
             <router-view/>
        </el-main>
      </el-container>
    </el-container>
    <el-footer style="margin-top: 10px;">
      <div>
        <img src="../../static/img/indexFoot.png" style="width: 1480.2px;height: 187px;" />
      </div>
    </el-footer>
  </el-container>
</template>

<script>
  import myUtil from "../util/myUtil"
  //引入axios模块
  import axios from 'axios'
  export default{
    name:"indexTrafficsys",
    data(){
      return{
        loginUserCardId:"",
        node:[
          {index:'1',name:"导航一",children:[{url:"/",name:"选项1"},{url:"/",name:"选项2"}]},
          {index:'2',name:"导航二",children:[{url:"/",name:"选项1"},{url:"/",name:"选项2"}]},
          {index:'3',name:"导航三",children:[{url:"/",name:"选项1"},{url:"/",name:"选项2"}]}
        ],
        driver:{
          cardId:"",
          name:"",
          phone:"",
          password:"",
          driveCardList:{
            id:"",
            driveCardId:"",
            nationality:"",
            cardId:"",
            createDate:"",
            clazz:"",
            validPeriod:"",
            department:"",
            score:"",
            state:""
          },
          travelCardList:{
            id:"",
            travelCarId:"",
            carNo:"",
            carClazz:"",
            cardId:"",
            userNature:"",
            brandModel:"",
            vin:"",
            engineNo:"",
            invalidDate:"",
            fileNo:"",
            state:"",
          }
        },
        police:{
          cardId:"",
          name:"",
          phone:"",
          password:""
        },

      }
    },
    methods:{
     loadPwoer(){
       var mythis = this;
       var url="";
       //取出本地存储的用户名cardId
       if(localStorage.getItem("loginDriverCardId")!=null){
         this.loginUserCardId=localStorage.getItem("loginDriverCardId");
         // console.log("loginDriverCardId:"+this.loginUserCardId);
         url=myUtil.url+"/api/driverSelectPower";
       }else if(localStorage.getItem("loginPoliceCardId")!=null){
         this.loginUserCardId=localStorage.getItem("loginPoliceCardId");
         // console.log("loginPoliceCardId:"+this.loginUserCardId);
         url=myUtil.url+"/api/policeSelectPower";
       }
       // console.log(url);
       $.ajax({
           url:url,
           type:"get",
           data:{"cardId": mythis.loginUserCardId},
           dataType:"json",
           success:function(data){
               // console.log(data)
               mythis.node = data.powerList;
               // console.log(mythis.node);
           }

       })
     },
     logout(){
       var mythis = this;
       var url="";
       if(localStorage.getItem("loginDriverCardId")!=null){
         url="/loginTrafficsys";
       }else{
         url="/loginTrafficsys2";
       }
       axios({
          headers:{
           'Content-Type':"application/json"
          },
          method:"post",
          url:myUtil.url+"/api/driverLogout",
          data:{
            driver:mythis.driver
          }
        }).then(function(rs){
          console.log(rs.data.info);
          if(rs.data.info=="成功清除缓存数据"){
            // console.log(rs.data.info);
            localStorage.removeItem("loginPoliceCardId")
            localStorage.removeItem("loginDriverCardId")
            //然后跳到启动主页面
            mythis.$router.replace(url);
          }
         })
     }
    },
    mounted(){
      //初始化加载权限信息
      // console.log(localStorage.getItem("loginDriverCardId"));
      this.loadPwoer();
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
  }

  .login-one {
    background-color: #2257a6;
    background-image: url(../../static/img/light.png);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }
</style>
